<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css"
        media="all">
  <link rel="stylesheet" href="../css/public.css" media="all">
  <style>
    .layui-table-cell img{
      text-align: center;
      height: auto;
      width: auto;
      white-space: normal;
      max-height: 25px;
      max-width: 30px;
      border-radius:50%;
      border: 1px solid salmon;
    }
  </style>

</head>
<body>
<div class="layuimini-container">
  <div class="layuimini-main">

    <fieldset class="table-search-fieldset">
      <legend>搜索管理员信息</legend>
      <div style="margin: 10px 10px 10px 10px">
        <form class="layui-form layui-form-pane" action="">
          <div class="layui-form-item">
            <div class="layui-inline">
              <label  class="layui-form-label">关键词</label>
              <div class="layui-input-inline">
                <input id="keyword" type="text" name="username" autocomplete="off"
                       class="layui-input">
              </div>
            </div>

            <div class="layui-inline">
              <button id="serachBtn" type="button"
                      class="layui-btn layui-btn-primary" lay-submit
                      lay-filter="data-search-btn">
                <i class="layui-icon"></i> 搜 索
              </button>
              <button id="addBtn" type="button"
                      class="layui-btn layui-btn-normal">新增管理员
              </button>
              <button id="transBtn" type="button"
                      class="layui-btn layui-btn-warm">超管转让
              </button>
            </div>
          </div>
        </form>
      </div>
    </fieldset>



    <table class="layui-hide" id="currentTableId"
           lay-filter="currentTableFilter"></table>

    <script type="text/html" id="currentTableBar">
      <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
    </script>



    <!-- 定义转让超管时弹出窗口的模板 -->
    <script type="text/html" id="transForm">

      <form class="layui-form" lay-filter="transForm">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">管理员名:</label>
          <div class="layui-input-inline">
            <input id="transAttendantName" type="text" name="transAttendantName" class="layui-input demo-phone"  >
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-input-block">
          <button id="confirmBtn" type="button" class="layui-btn">确认转让</button>
        </div>
      </div>
      </form>
     </script>

    <!-- 定义新增时弹出窗口的模板 -->
    <script type="text/html" id="attendantForm">

      <form class="layui-form"  lay-filter="attendantForm">

        <div class="layui-form-item">
          <label class="layui-form-label">用户名</label>
          <div class="layui-input-inline">

            <input id="id" type="hidden"  name="id" >

            <input id="username" type="text" name="username" autocomplete="off" placeholder="请输入用户名" class="layui-input">
          </div>
        </div>

        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
              <div>
              <input id="password" type="password" name="password" class="layui-input demo-phone"  >
              </div>
              <div>
                <button id="hiddenPassword" type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>

              </div>
            </div>
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">性别</label>
          <div class="layui-input-block">
            <input  type="radio" name="sex" value="男" title="男" checked="">
            <input  type="radio" name="sex" value="女" title="女">
          </div>
        </div>


        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">生日</label>
            <div class="layui-input-inline">
              <input id="birthday" type="text" name="birthday"   class="layui-input demo-phone" placeholder="yyyy-MM-dd">
            </div>
          </div>
        </div>

        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">月薪</label>
            <div class="layui-input-inline">
              <input id="cash" type="number" name="cash"  autocomplete="off" class="layui-input demo-phone">
            </div>
          </div>
        </div>

        <div class="layui-inline">
          <label class="layui-form-label">头像</label>
          <div class="layui-input-inline">
            <img id="avatar" width="50px" height="50px" src="">
            <input type="hidden" name="avatar" id="avatarAddress">
          </div>
        </div>

        <br>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <input type="hidden" value="否" name="superadmin">
            <button id="saveBtn" type="button" class="layui-btn">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
      </form>
    </script>
  </div>
</div>
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script >
  layui.use([ 'form', 'table', 'layer', 'laydate' ,'upload'], function() {
    var $ = layui.jquery, form = layui.form, table = layui.table;
    layer = layui.layer;
    laydate = layui.laydate;
    var upload = layui.upload;

    //超管转让
    $("#transBtn").on("click",function (){
      $.post("/attendant/doChose",{choseId:1},function (result) {
        if (result.data!=null) {//是-按钮放行
          layer.open({
            type : 1,
            title : "超管转让",
            area : [ "450px", "200px" ],
            content : $("#transForm").html(),
          });
        }else{
          layer.msg("您没有该权限!")
        }
      });
    });

    //确认转让按钮
    $("body").on("click","#confirmBtn",function (){
      var data = form.val("transForm");
      if(data.transAttendantName==null || data.transAttendantName==""){
        layer.msg("管理员名字不能为空!");
        return false;
      }
      layer.confirm('确认转让吗？', function() {
        //发送请求把数据推送给后台
        $.post("/attendant/trans", data, function(result) {
          if(result.code==0){
            //关闭窗口
            layer.closeAll();
            //点击搜索
            $("#serachBtn").click();
            layer.msg(result.msg);
          }else {
            layer.msg(result.msg);
          }
        });
      });
    });

    $("#serachBtn").on("click", function() {
      table.render({
        elem : '#currentTableId',
        url : '/attendant/list',//请求放在表格中的数据
        where:{keyword:$("#keyword").val()},
        toolbar : '#toolbarDemo',
        defaultToolbar : [ 'filter', 'exports', 'print', {
          title : '提示',
          layEvent : 'LAYTABLE_TIPS',
          icon : 'layui-icon-tips'
        } ],
        cols : [ [ {
          type : "checkbox",
          width : 50
        }, {
          field : 'id',
          width : 80,
          title : 'ID',
          sort : true
        },{
          field : 'avatar',
          title : '头像',
          height: 90,
          width: 80,
          templet: '<div><img src="{{d.avatar}}"></div>'
        },{
          field : 'username',
          width : 80,
          title : '用户名'
        }, {
          field : 'sex',
          width : 80,
          title : '性别'
        }, {
          field : 'birthday',
          width : 180,
          title : '生日'
        }, {
          field : 'cash',
          width : 80,
          title : '月薪'
        }, {
          field : 'password',
          width : 90,
          title : '密码'
        }, {
          field : 'superadmin',
          width : 120,
          title : '超级管理员'

        },{
          title : '操作',
          minWidth : 150,
          toolbar : '#currentTableBar',
          align : "center"
        } ] ],
        limits : [ 5,10, 15 ],
        limit : 15,
        page : true,
        skin : 'line'
      });
    }).click();

    //给新增按钮绑定事件
    $("#addBtn").on("click",function() {
      $.post("/attendant/doChose",{choseId:1},function (result) {
        // 判断一下是不是超级管理员
        if (result.data!=null) {//是-按钮放行
          layer.open({
            type : 1,
            title : "新增管理员",
            area : [ "450px", "500px" ],
            content : $("#attendantForm").html(),
          });

          laydate.render({
            elem : '#birthday' //指定元素
          });
          //渲染表单
          form.render();
          //渲染图片
          upload.render({
            elem: '#avatar' //绑定元素
            ,url: '/attendant/avatar' //上传接口
            ,done: function(res){
              if(res.code==0){
                $("#avatarAddress").val(res.data.avatar);
                $("#avatar").attr("src",res.data.avatar);
              }
            }
            ,error: function(){
              //请求异常回调
            }
          });
        }else{//不是-异常提示
          layer.msg("您不是超级管理员，无法添加管理员!");
        }
      });

    });

    //保存按钮绑定事件
    $("body").on("click","#saveBtn", function() {
      //打包form表单中的数据
      var data = form.val("attendantForm");
      if(data.username==null || data.username==""){
        layer.msg("用户名不能为空!");
        return false;
      }
      //发送请求把数据推送给后台
      $.post("/attendant/save", data, function(result) {
        if(result.code==0){
          //关闭窗口
          layer.closeAll();
          //点击搜索
          $("#serachBtn").click();
        }else {
            layer.msg(result.msg);
        }
      });
    });

    //给操作框绑定事件
    table.on('tool(currentTableFilter)', function(obj) {
      //如果点的时编辑按钮
      if (obj.event === 'edit') {
        $.post("/attendant/doChose",{choseId:2,attendantId:obj.data.id},function (result) {
          if(result.data!=null){
            $.post("/attendant/selectById?id="+obj.data.id,function(m){
              if(m.code==0) {
                //弹窗
                layer.open({
                  type: 1,
                  title: "修改管理员信息",
                  area: ["450px", "500px"],
                  content: $("#attendantForm").html()
                });
                $("#password").attr("disabled",true);
                laydate.render({
                  elem: '#birthday' //指定元素
                });
                form.render();
                $("#avatar").attr("src", m.data.avatar);
                form.val("attendantForm", m.data);
                upload.render({
                  elem: '#avatar' //绑定元素
                  , url: '/attendant/avatar' //上传接口
                  , done: function (res) {
                    if (res.code == 0) {
                      $("#avatarAddress").val(res.data.avatar);
                      $("#avatar").attr("src", res.data.avatar);
                    }
                  }
                  , error: function () {
                    //请求异常回调
                  }
                });
              }
              else{
                layer.msg(m.msg);
              }
            });
          }else {
              layer.msg("您没有修改他人信息权限!");
          }
        });
      } else if (obj.event === 'delete') {//点删除按钮时
        $.post("/attendant/doChose",{choseId:1},function (m) {
          if(m.data!=null){
            layer.confirm('确认删除该员工吗？', function() {
              //发送请求，通知后台删除数据
              $.post("/attendant/delete?id="+obj.data.id, function(result) {
                //关闭窗口
                layer.closeAll();
                //重新渲染表格
                $("#serachBtn").click();
                layer.msg(result.msg);
              });
            });
          }else {
            layer.msg("您没有该删除功能权限!")
          }
        });
      }
    });
  });
</script>

</body>
</html>